<script>
	import {
		getArticleDetail,
		getArticleCommentList,
		AddUpvote,
		CancelUpvote,
		CheckUpVote,
		getAddCollection,
		getCancelCollection,
		getCheckCollection
	} from "@/api/homePage";

	export default {
		name: "index",
		data() {
			return {
				detail: {},
				showLangBtn: false,
				currentLangIndex: 0,
				comments: [],
				dotShow: false, // 是否已点赞
				isCollected: false, // 是否收藏
				readOnly: false
			}
		},
		onLoad(options) {
			console.log(options)
			if (options) {
				if (options.id) {
					this.getArticleData(options.id);
					// 检查点赞和收藏状态
					this.checkUpvoteStatus(options.id);
					this.checkCollectionStatus(options.id);
				}
				if (options.readOnly) {
					this.readOnly = true;
				}

			}
		},
		methods: {
			getArticleData(id) {
				getArticleDetail({
					Id: id
				}).then(res => {
					this.detail = res.Data
					console.log(JSON.parse(JSON.stringify(this.detail)))
					this.showLangBtn = Array.isArray(res.Data.OtherLanguageInfo) && res.Data.OtherLanguageInfo
						.length > 0;
					this.currentLangIndex = 0;
					uni.setNavigationBarTitle({
						title: this.detail.Title
					})
					// 文章详情加载后加载评论
					this.fetchComments(id);
				})
			},
			switchLanguage() {
				if (!this.showLangBtn) return;
				if (this.currentLangIndex === 0) {
					this.detail = this.detail.OtherLanguageInfo[0];
					this.currentLangIndex = 1;
					uni.setNavigationBarTitle({
						title: this.detail.Title
					})
				} else {
					getArticleDetail({
						Id: this.detail.ArticleId || this.detail.Id
					}).then(res => {
						this.detail = res.Data;
						this.currentLangIndex = 0;
						uni.setNavigationBarTitle({
							title: res.Data.Title
						})
					})
				}
			},
			// 检查是否点赞
			checkUpvoteStatus(id) {
				CheckUpVote({
					Id: id
				}).then(res => {
					this.dotShow = res.Data;
				});
			},
			// 检查收藏状态
			checkCollectionStatus(id) {
				getCheckCollection({
					CollectionType: 2,
					Id: id
				}).then((res) => {
					this.isCollected = res.Data;
				})
			},
			// 获取评论列表
			fetchComments(id) {
				getArticleCommentList({
					ArticleId: id,
					Index: 1,
					Size: 10
				}).then(res => {
					// 假设返回的数据结构为 res.Data 为数组
					this.comments = Array.isArray(res.Data) ? res.Data : [];
				})
			},
			// 跳转到评论页面
			jumpComments() {
				uni.navigateTo({
					url: "/pages/article/comments?id=" + (this.detail.ArticleId || this.detail.Id)
				})
			},
			// 切换收藏状态
			async toggleCollect() {
				try {
					if (this.isCollected) {
						// 取消收藏
						const res = await getCancelCollection({
							CollectionType: 2, // 商家收藏类型
							Id: this.detail.ArticleId || this.detail.Id // 文章ID
						});
						this.isCollected = false;
						uni.showToast({
							title: '已取消收藏',
							icon: 'none',
							duration: 2000
						});
					} else {
						// 添加收藏
						const res = await getAddCollection({
							CollectionType: 2, // 商家收藏类型
							Id: this.detail.ArticleId || this.detail.Id // 文章ID
						});
						this.isCollected = true;
						uni.showToast({
							title: '收藏成功',
							icon: 'success',
							duration: 2000
						});
					}
				} catch (error) {
					console.error('操作收藏失败:', error);
					uni.showToast({
						title: '操作失败，请重试',
						icon: 'none',
						duration: 2000
					});
				}
			},
			// 点赞/取消点赞
			dot() {
				if (this.dotShow) {
					CancelUpvote({
						Id: this.detail.ArticleId || this.detail.Id
					}).then(res => {
						console.log('取消点赞返回：', res);
						this.checkUpvoteStatus(this.detail.ArticleId || this.detail.Id);
					}).catch(err => {
						console.error('取消点赞出错:', err);
						uni.showToast({
							title: '取消点赞出错',
							icon: 'none'
						});
					});
				} else {
					AddUpvote({
						Id: this.detail.ArticleId || this.detail.Id
					}).then(res => {
						console.log('点赞返回：', res);
						this.checkUpvoteStatus(this.detail.ArticleId || this.detail.Id);
					}).catch(err => {
						console.error('点赞出错:', err);
						uni.showToast({
							title: '点赞出错',
							icon: 'none'
						});
					});
				}
			}
		},
	}
</script>

<template>
	<view class="container">
		<!-- 文章标题和操作按钮 -->
		<view class="title-container" >
			<view class="article-title">{{detail.Title}}</view>
			<view class="action-btns" v-if="!readOnly">
				<!-- 点赞按钮 -->
				<view class="action-btn" @click="dot">
					<image v-if="dotShow" src="/static/img/collect1.png" mode="aspectFit"></image>
					<image v-else src="/static/img/collect.png" mode="aspectFit"></image>
				</view>
				<!-- 收藏按钮 -->
				<view class="action-btn" @click="toggleCollect()">
					<image :src="isCollected ? 'https://wzws.wanshanlundiao.cn/upload/img/20250519/202505191530139634.png'
        : 'https://wzws.wanshanlundiao.cn/upload/img/20250519/202505191530083228.png'" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<!-- 文章基本信息 -->
		<view class="article-info">
			<view class="info-item" v-if="detail.Source">
				<text class="value">{{detail.Source}}</text>
			</view>
			<view class="info-item" v-if="detail.Author">
				<text class="value">{{detail.Author}}</text>
			</view>
			<view class="info-item" v-if="detail.AddTime">
				<text class="value">{{detail.AddTime}}</text>
			</view>
			<view class="info-item" v-if="detail.ViewsNum">
				<text class="value">{{detail.ViewsNum}}{{$t('articleDetail.views')}}</text>
			</view>
		</view>

		<!-- 音频播放控件 -->
		<view v-if="(currentLangIndex === 0 && detail.ChineseVoice) || (currentLangIndex === 1 && detail.AudioFile)"
			class="audio-bar">
			<audio :src="currentLangIndex === 0 ? detail.ChineseVoice : detail.AudioFile" controls
				style="width: 100%;" />
		</view>

		<!-- 文章内容 -->
		<mp-html :content="detail.ChineseSubstance || detail.Substance" lazy-load images-update-mode="onLoad" />

		<!-- 评论区 -->
		<view class="comment-section" v-if="!readOnly">
			<view class="comment-title">{{$t('articleDetail.comments')}}({{comments.length}})</view>
			<view v-for="(item, idx) in comments" :key="idx" class="comment-item">
				<image class="avatar" v-if="item.HeadImg" :src="item.HeadImg" />
				<view class="comment-content">
					<view class="comment-header">
						<text class="nickname" v-if="item.UserName">{{item.UserName}}</text>
						<text class="time" v-if="item.AddTime">{{item.AddTime}}</text>
					</view>
					<view class="text" v-if="item.ContentText">{{item.ContentText}}</view>
				</view>
			</view>
			<!-- 写评论按钮 -->
			<view class="comment-btn-bar">
				<button class="write-comment-btn" @click="jumpComments">{{$t('articleDetail.writeComment')}}</button>
			</view>
		</view>

		<!-- 语言切换按钮 -->
		<view v-if="showLangBtn" class="lang-switch-btn" @click="switchLanguage">
			{{ currentLangIndex === 0 ? $t('articleDetail.switchToEnglish') : $t('articleDetail.switchToChinese') }}
		</view>
	</view>
</template>

<style scoped lang="scss">
	.container {
		min-height: 100vh;
		padding: 20rpx;
		background-color: #F5F6F7;
	}

	.title-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.article-title {
			flex: 1;
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			line-height: 1.4;
		}

		.action-btns {
			display: flex;
			align-items: center;

			.action-btn {
				width: 70rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 20rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}

	.article-info {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
		align-items: center;

		.info-item {
			margin-right: 20rpx;

			&:last-child {
				margin-right: 0;
			}

			.value {
				color: #666;
				font-size: 24rpx;
			}
		}
	}

	.audio-bar {
		margin-bottom: 20rpx;
	}

	.lang-switch-btn {
		position: fixed;
		right: 40rpx;
		bottom: 60rpx;
		z-index: 999;
		background: #007aff;
		color: #fff;
		padding: 24rpx 40rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
		text-align: center;
	}

	/* 评论区样式 */
	.comment-section {
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx 0;

		.comment-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.comment-item {
			display: flex;
			margin-bottom: 30rpx;

			.avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.comment-content {
				flex: 1;

				.comment-header {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;

					.nickname {
						font-weight: bold;
						margin-right: 16rpx;
					}

					.time {
						color: #999;
						font-size: 24rpx;
					}
				}

				.text {
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}
			}
		}

		.comment-btn-bar {
			display: flex;
			justify-content: flex-end;
			margin-top: 10rpx;

			.write-comment-btn {
				background: linear-gradient(90deg, #3a7fe6, #5895e9);
				color: #fff;
				font-size: 28rpx;
				border-radius: 35rpx;
				padding: 0 40rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-weight: bold;
				border: none;
			}
		}
	}
</style>